iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
1

今天要寫瀏覽器的驗收測試。

跟昨天不一樣的地方在於,現在要測的是瀏覽器的行為,我們必須要啟動伺服器,並佈署程式,才能開瀏覽器測試。

這樣的好處是:過程更像上線,中間哪裡有環節出錯,甚至是測試過程出錯,代表上線人工做一樣的測試,極有可能會發生一樣的問題。但壞處就是執行的時間成本太高,跑上千個單元測試,可能還比跑一個驗收測試快;錯誤回饋的時間會拉很長,所以除錯時間也會跟著拉長。

但不管怎麼說,有需要開瀏覽器測功能的話,寫成自動化肯定能帶來很大的效益。

Browser Tests

Laravel 也有提供強大的瀏覽器測試套件, Dusk 。今天就來實作 Dusk 的測試吧!

首先先安裝套件:

$ composer require laravel/dusk

套件安裝完後,再初始化 Dusk :

$ php artisan dusk:install

tests/Browser/ExampleTest.php 是它預設的範例測試。

我們可以先來測試看看,不過這次測試得先做點準備工夫,首先要調整環境設定 .env

APP_URL=http://localhost:8000

接著啟動伺服器:

$ php artisan dusk

現在就能開始跑測試了:

$ php artisan dusk

There was 1 failure:

1) Tests\Browser\ExampleTest::testBasicExample
Did not see expected text [Laravel] within element [body].
Failed asserting that false is true.

什麼!居然出錯了?

這是因為 Dusk 預設是測官方的預設頁面,裡面有大大的 Laravel ,現在官方的預設頁面被我們換成首頁了,所以我們需要修改測試檔 tests/Browser/ExampleTest.php

<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;

class ExampleTest extends DuskTestCase
{
    /**
     * @test
     */
    public function shouldBeOkWhenSeeIndexPage()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                ->assertSee('產品分類')
                ->assertSee('管理員頁面')
                ->assertSee('聯絡我們')
                ->assertSee('查看購物車')
                ->assertSee('回首頁')
                ->clickLink('管理員頁面')
                ->assertSee('統計功能')
                ->clickLink('查看購物車')
                ->assertSee('購物清單');
        });
    }

    /**
     * @test
     */
    public function shouldBeOkWhenSeeAdminPage()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/admin.php')
                ->assertSee('管理功能')
                ->assertSee('統計功能')
                ->clickLink('商品管理')
                ->assertSee('庫存')
                ->clickLink('訂單管理')
                ->assertSee('訂單列表');
        });
    }
}

Laravel 提供的測試方法很語意化,可以了解這個測試的方法為何。修改完後,測試就會正常了:

$ php artisan dusk
PHPUnit 6.5.5 by Sebastian Bergmann and contributors.

..                                                                  2 / 2 (100%)

Time: 1.93 seconds, Memory: 14.00MB

OK (2 tests, 11 assertions)

整合 CI

最後,我們會希望 CI 把關一切測試,當然也包括了瀏覽器測試。

官方有提供如何串接 CI 的範例,裡面重要的關鍵有下面幾個:

  1. 要安裝 Chrome ,因此需要 sudo 權限

    sudo: required
    addons:
       chrome: stable
    
  2. 背景啟動 Chrome Headless 模式與 Server

    before_script:
    - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
    - php artisan serve &
    
  3. URL 設定

    env:
      global:
        APP_URL: http://localhost:8000
    
  4. 執行測試

    script:
    - php artisan dusk
    

這樣 Travis CI 也就可以幫我們測試 UI 了。


到目前為止,測試的初始化已經算完成最簡單部分了。有了這些測試,後面的重構將會因此更為順利。

相關的程式碼可以參考 GitHub PR


上一篇
導入驗收測試(1)
下一篇
準備工作的簡短回顧
系列文
看到 code 寫成這樣我也是醉了,不如試試重構?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言